<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>售后沟通</title>
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.communication-container {
			padding: 20px;
			max-width: 1200px;
			margin: 0 auto;
		}
		.communication-layout {
			display: grid;
			grid-template-columns: 1fr 2fr;
			gap: 20px;
			height: calc(100vh - 200px);
			min-height: 600px;
		}
		.sidebar {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			overflow: hidden;
			display: flex;
			flex-direction: column;
		}
		.sidebar-header {
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			padding: 20px;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.sidebar-title {
			font-size: 16px;
			font-weight: 600;
		}
		.contact-tabs {
			display: flex;
			background: #f8f9fa;
			border-bottom: 1px solid #e9ecef;
		}
		.contact-tab {
			flex: 1;
			padding: 12px;
			text-align: center;
			cursor: pointer;
			transition: all 0.2s;
			border-bottom: 2px solid transparent;
			font-size: 14px;
		}
		.contact-tab.active {
			background: #fff;
			color: #409eff;
			border-bottom-color: #409eff;
		}
		.contact-list {
			flex: 1;
			overflow-y: auto;
		}
		.contact-item {
			padding: 15px;
			border-bottom: 1px solid #f0f2f5;
			cursor: pointer;
			transition: all 0.2s;
			display: flex;
			align-items: center;
			gap: 12px;
		}
		.contact-item:hover {
			background: #f0f9ff;
		}
		.contact-item.active {
			background: #e6f7ff;
			border-right: 3px solid #409eff;
		}
		.contact-avatar {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: #409eff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-weight: bold;
			position: relative;
		}
		.online-indicator {
			position: absolute;
			bottom: 0;
			right: 0;
			width: 12px;
			height: 12px;
			background: #52c41a;
			border: 2px solid #fff;
			border-radius: 50%;
		}
		.contact-info {
			flex: 1;
			min-width: 0;
		}
		.contact-name {
			font-weight: 500;
			color: #333;
			margin-bottom: 4px;
		}
		.contact-status {
			font-size: 12px;
			color: #999;
		}
		.unread-badge {
			background: #ff4d4f;
			color: white;
			font-size: 11px;
			padding: 2px 6px;
			border-radius: 10px;
			min-width: 16px;
			text-align: center;
		}
		.chat-area {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
			display: flex;
			flex-direction: column;
			overflow: hidden;
		}
		.chat-header {
			padding: 20px;
			border-bottom: 1px solid #f0f2f5;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.chat-user-info {
			display: flex;
			align-items: center;
			gap: 12px;
		}
		.chat-user-name {
			font-size: 16px;
			font-weight: 600;
			color: #333;
		}
		.chat-user-status {
			font-size: 12px;
			color: #52c41a;
		}
		.chat-actions {
			display: flex;
			gap: 10px;
		}
		.chat-messages {
			flex: 1;
			padding: 20px;
			overflow-y: auto;
			background: #f8f9fa;
		}
		.message {
			margin-bottom: 20px;
			display: flex;
			gap: 12px;
		}
		.message.sent {
			flex-direction: row-reverse;
		}
		.message-avatar {
			width: 36px;
			height: 36px;
			border-radius: 50%;
			background: #409eff;
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			font-size: 14px;
			font-weight: bold;
			flex-shrink: 0;
		}
		.message.sent .message-avatar {
			background: #67c23a;
		}
		.message-content {
			max-width: 70%;
		}
		.message-bubble {
			background: #fff;
			padding: 12px 16px;
			border-radius: 12px;
			box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
			word-wrap: break-word;
		}
		.message.sent .message-bubble {
			background: #409eff;
			color: white;
		}
		.message-time {
			font-size: 11px;
			color: #999;
			margin-top: 4px;
			text-align: center;
		}
		.message.sent .message-time {
			color: #ccc;
		}
		.system-message {
			text-align: center;
			margin: 20px 0;
		}
		.system-message-content {
			background: #f0f0f0;
			color: #999;
			padding: 8px 12px;
			border-radius: 12px;
			font-size: 12px;
			display: inline-block;
		}
		.chat-input {
			padding: 20px;
			border-top: 1px solid #f0f2f5;
		}
		.input-toolbar {
			display: flex;
			gap: 10px;
			margin-bottom: 12px;
		}
		.toolbar-btn {
			padding: 6px 10px;
			border: 1px solid #e9ecef;
			border-radius: 4px;
			background: #fff;
			cursor: pointer;
			transition: all 0.2s;
			font-size: 14px;
			color: #666;
		}
		.toolbar-btn:hover {
			border-color: #409eff;
			color: #409eff;
		}
		.input-area {
			display: flex;
			gap: 10px;
			align-items: flex-end;
		}
		.message-input {
			flex: 1;
			min-height: 40px;
			max-height: 120px;
			resize: none;
			border: 1px solid #e9ecef;
			border-radius: 6px;
			padding: 8px 12px;
			font-size: 14px;
			line-height: 1.4;
		}
		.message-input:focus {
			border-color: #409eff;
			outline: none;
		}
		.send-btn {
			background: #409eff;
			color: white;
			border: none;
			border-radius: 6px;
			padding: 8px 20px;
			cursor: pointer;
			transition: all 0.2s;
		}
		.send-btn:hover {
			background: #66b1ff;
		}
		.send-btn:disabled {
			background: #c0c4cc;
			cursor: not-allowed;
		}
		.quick-replies {
			background: #fff;
			border-radius: 8px;
			padding: 15px;
			margin-bottom: 15px;
			border: 1px solid #e9ecef;
		}
		.quick-title {
			font-size: 14px;
			font-weight: 500;
			color: #333;
			margin-bottom: 10px;
		}
		.quick-options {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
		}
		.quick-option {
			padding: 6px 12px;
			background: #f0f9ff;
			color: #409eff;
			border: 1px solid #b3d8ff;
			border-radius: 4px;
			font-size: 12px;
			cursor: pointer;
			transition: all 0.2s;
		}
		.quick-option:hover {
			background: #409eff;
			color: white;
		}
		.no-chat {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
			color: #999;
		}
		.typing-indicator {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 8px 16px;
			background: rgba(64, 158, 255, 0.1);
			border-radius: 12px;
			margin-bottom: 12px;
		}
		.typing-dots {
			display: flex;
			gap: 2px;
		}
		.typing-dot {
			width: 4px;
			height: 4px;
			background: #409eff;
			border-radius: 50%;
			animation: typing 1.4s infinite;
		}
		.typing-dot:nth-child(2) {
			animation-delay: 0.2s;
		}
		.typing-dot:nth-child(3) {
			animation-delay: 0.4s;
		}
		@keyframes typing {
			0%, 60%, 100% { transform: translateY(0); }
			30% { transform: translateY(-10px); }
		}
	</style>
</head>
<body>
	<div id="app" v-cloak>
		<div class="communication-container">
			<!-- 页面标题 -->
			<div class="page-title">
				<h2>售后沟通</h2>
				<p>在线客服对话、留言反馈，及时解决问题</p>
			</div>

			<div class="communication-layout">
				<!-- 联系人侧边栏 -->
				<div class="sidebar">
					<div class="sidebar-header">
						<div class="sidebar-title">售后沟通</div>
						<el-button size="small" @click="refreshContacts">
							<i class="el-icon-refresh"></i>
						</el-button>
					</div>
					
					<div class="contact-tabs">
						<div 
							v-for="tab in contactTabs" 
							:key="tab.value"
							:class="['contact-tab', {active: activeContactTab === tab.value}]"
							@click="switchContactTab(tab.value)">
							{{tab.label}}
						</div>
					</div>
					
					<div class="contact-list">
						<div v-for="contact in filteredContacts" :key="contact.id" 
							:class="['contact-item', {active: activeContact && activeContact.id === contact.id}]"
							@click="selectContact(contact)">
							<div class="contact-avatar">
								{{contact.name.charAt(0)}}
								<div class="online-indicator" v-if="contact.online"></div>
							</div>
							<div class="contact-info">
								<div class="contact-name">{{contact.name}}</div>
								<div class="contact-status">{{contact.status}}</div>
							</div>
							<div class="unread-badge" v-if="contact.unreadCount > 0">{{contact.unreadCount}}</div>
						</div>
					</div>
				</div>

				<!-- 聊天区域 -->
				<div class="chat-area">
					<!-- 无选择状态 -->
					<div v-if="!activeContact" class="no-chat">
						<i class="el-icon-chat-dot-round" style="font-size: 64px; color: #ddd; margin-bottom: 20px;"></i>
						<p>请选择联系人开始对话</p>
						<el-button type="primary" @click="startNewChat">发起新对话</el-button>
					</div>

					<!-- 聊天界面 -->
					<template v-else>
						<div class="chat-header">
							<div class="chat-user-info">
								<div class="contact-avatar" style="width: 32px; height: 32px; font-size: 14px;">
									{{activeContact.name.charAt(0)}}
								</div>
								<div>
									<div class="chat-user-name">{{activeContact.name}}</div>
									<div class="chat-user-status">{{activeContact.online ? '在线' : '离线'}}</div>
								</div>
							</div>
							<div class="chat-actions">
								<el-button size="small" @click="viewHistory">历史记录</el-button>
								<el-button size="small" @click="transferService">转接客服</el-button>
								<el-button size="small" type="primary" @click="createTicket">创建工单</el-button>
							</div>
						</div>

						<div class="chat-messages" ref="messagesContainer">
							<!-- 系统消息 -->
							<div class="system-message">
								<span class="system-message-content">
									{{activeContact.name}} 已接入，开始为您服务
								</span>
							</div>

							<!-- 消息列表 -->
							<div v-for="message in currentMessages" :key="message.id" 
								:class="['message', message.type]">
								<div class="message-avatar">
									{{message.type === 'sent' ? '我' : activeContact.name.charAt(0)}}
								</div>
								<div class="message-content">
									<div class="message-bubble">{{message.content}}</div>
									<div class="message-time">{{message.time}}</div>
								</div>
							</div>

							<!-- 输入中指示器 -->
							<div v-if="isTyping" class="typing-indicator">
								<span>{{activeContact.name}} 正在输入</span>
								<div class="typing-dots">
									<div class="typing-dot"></div>
									<div class="typing-dot"></div>
									<div class="typing-dot"></div>
								</div>
							</div>
						</div>

						<div class="chat-input">
							<!-- 快捷回复 -->
							<div class="quick-replies">
								<div class="quick-title">快捷回复</div>
								<div class="quick-options">
									<span v-for="reply in quickReplies" :key="reply" 
										class="quick-option" @click="sendQuickReply(reply)">
										{{reply}}
									</span>
								</div>
							</div>

							<!-- 工具栏 -->
							<div class="input-toolbar">
								<span class="toolbar-btn" @click="selectImage">
									<i class="el-icon-picture-outline"></i> 图片
								</span>
								<span class="toolbar-btn" @click="selectFile">
									<i class="el-icon-paperclip"></i> 文件
								</span>
								<span class="toolbar-btn" @click="insertEmoji">
									<i class="el-icon-sunny"></i> 表情
								</span>
							</div>

							<!-- 输入区域 -->
							<div class="input-area">
								<textarea 
									v-model="inputMessage" 
									class="message-input"
									placeholder="请输入消息内容..."
									@keydown.enter.prevent="sendMessage"
									@input="handleTyping">
								</textarea>
								<button class="send-btn" @click="sendMessage" :disabled="!inputMessage.trim()">
									发送
								</button>
							</div>
						</div>
					</template>
				</div>
			</div>
		</div>
	</div>

	<!-- 引入依赖 -->
	<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data() {
				return {
					activeContactTab: 'service',
					activeContact: null,
					inputMessage: '',
					isTyping: false,
					contactTabs: [
						{label: '在线客服', value: 'service'},
						{label: '技术支持', value: 'tech'},
						{label: '投诉建议', value: 'complaint'}
					],
					contacts: [
						{
							id: 1,
							name: '客服小雁',
							type: 'service',
							status: '为您服务中',
							online: true,
							unreadCount: 0,
							avatar: '雁'
						},
						{
							id: 2,
							name: '技术小冰',
							type: 'tech',
							status: '技术专家',
							online: true,
							unreadCount: 2,
							avatar: '冰'
						},
						{
							id: 3,
							name: '投诉专员',
							type: 'complaint',
							status: '投诉处理中',
							online: false,
							unreadCount: 0,
							avatar: '投'
						}
					],
					messages: {
						1: [
							{
								id: 1,
								type: 'received',
								content: '您好！我是客服小雁，很高兴为您服务。请问有什么可以帮助您的吗？',
								time: '14:30'
							}
						],
						2: [
							{
								id: 1,
								type: 'received',
								content: '您好！我是技术支持小冰，请描述您遇到的技术问题。',
								time: '14:25'
							},
							{
								id: 2,
								type: 'received',
								content: '我会尽快为您解决问题。',
								time: '14:26'
							}
						],
						3: []
					},
					quickReplies: [
						'你好',
						'谢谢',
						'我想退货',
						'订单有问题',
						'商品质量问题',
						'配送延误'
					]
				}
			},
			computed: {
				filteredContacts() {
					return this.contacts.filter(contact => contact.type === this.activeContactTab);
				},
				currentMessages() {
					return this.activeContact ? (this.messages[this.activeContact.id] || []) : [];
				}
			},
			methods: {
				switchContactTab(tab) {
					this.activeContactTab = tab;
					this.activeContact = null;
				},
				selectContact(contact) {
					this.activeContact = contact;
					contact.unreadCount = 0;
					this.scrollToBottom();
				},
				sendMessage() {
					if (!this.inputMessage.trim()) return;
					
					const message = {
						id: Date.now(),
						type: 'sent',
						content: this.inputMessage.trim(),
						time: this.getCurrentTime()
					};
					
					if (!this.messages[this.activeContact.id]) {
						this.messages[this.activeContact.id] = [];
					}
					
					this.messages[this.activeContact.id].push(message);
					this.inputMessage = '';
					this.scrollToBottom();
					
					// 模拟客服回复
					this.simulateReply();
				},
				sendQuickReply(reply) {
					this.inputMessage = reply;
					this.sendMessage();
				},
				simulateReply() {
					// 模拟输入中状态
					this.isTyping = true;
					
					setTimeout(() => {
						this.isTyping = false;
						
						const replies = [
							'好的，我已经收到您的消息，正在为您处理。',
							'请稍等，我查询一下相关信息。',
							'明白了，让我为您解决这个问题。',
							'收到，我会尽快处理您的请求。'
						];
						
						const reply = {
							id: Date.now(),
							type: 'received',
							content: replies[Math.floor(Math.random() * replies.length)],
							time: this.getCurrentTime()
						};
						
						this.messages[this.activeContact.id].push(reply);
						this.scrollToBottom();
					}, 2000);
				},
				handleTyping() {
					// 模拟发送输入中状态给客服
				},
				getCurrentTime() {
					const now = new Date();
					return `${now.getHours().toString().padStart(2, '0')}:${now.getMinutes().toString().padStart(2, '0')}`;
				},
				scrollToBottom() {
					this.$nextTick(() => {
						const container = this.$refs.messagesContainer;
						if (container) {
							container.scrollTop = container.scrollHeight;
						}
					});
				},
				refreshContacts() {
					this.$message.success('联系人列表已刷新');
				},
				startNewChat() {
					// 默认选择第一个在线客服
					const onlineService = this.contacts.find(c => c.type === 'service' && c.online);
					if (onlineService) {
						this.activeContactTab = 'service';
						this.selectContact(onlineService);
					}
				},
				viewHistory() {
					this.$message.info('查看历史聊天记录');
				},
				transferService() {
					this.$message.info('正在为您转接其他客服...');
				},
				createTicket() {
					this.$message.success('已为您创建服务工单');
				},
				selectImage() {
					this.$message.info('选择图片功能');
				},
				selectFile() {
					this.$message.info('选择文件功能');
				},
				insertEmoji() {
					this.$message.info('插入表情功能');
				}
			},
			mounted() {
				// 自动选择第一个联系人
				if (this.filteredContacts.length > 0) {
					this.selectContact(this.filteredContacts[0]);
				}
			}
		});
	</script>
</body>
</html>